<template>
  <div class="app-container">
    <div class="top-filter" >
      <!-- <el-button type="primary"  @click="handleAdd" size="lg">添加</el-button> -->
      <el-button type="primary" @click="handleBatch">批量派遣</el-button>
    </div>
    <my-data-table status="WAIT_SEND" @selection-change="handleSelectionChange" ref="dataTable">

      <el-table-column slot="first-column" type="selection" fixed width="55"> </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" slot="operator">
        <template slot-scope="scope">

          <el-button type="text" @click="handleSend(scope.row.id)" style="margin-right: 8px">派遣</el-button>
          <el-popconfirm title="确定终止合同吗？" @confirm="handleStopContract(scope.row.id)">
            <el-button type="text" slot="reference">终止合同</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </my-data-table>
    <batch-send-pop
      :visible="batchPop"
      :list="selection"
      @batchSendSuccess="handleBatchSuccess"
      @batchSendHide="handleBatchHide"
    ></batch-send-pop>

  </div>
</template>

<script>
import {  stopFlow } from '@common/api/worker';
import { Message } from 'element-ui';
import BatchSendPop from './components/batchSend.vue';
import MyDataTable from './components/table.vue';

export default {
  components: { BatchSendPop, MyDataTable  },
  data() {
    return {
      batchProposalPop: false, // 安全承诺书
      batchPop: false, // 批量发起弹窗
      selection: [],
    };
  },
  methods: {
    handleBatch() {
      if (!this.selection.length) {
        return Message({
          type: 'warning',
          message: '请先选择人员',
          duration: 5 * 1000,
        });
      }
      this.batchPop = true;
    },

    handleBatchSuccess() {
      this.batchPop = false;
      this.$refs.dataTable.onReset();
    },
    handleBatchHide() {
      this.batchPop = false;
    },
    handleSelectionChange(val) {
      this.selection = val;
    },


    // 单个派遣
    async handleSend(Id) {
      const worker =  this.$refs.dataTable.list.find(v => v.id === Id);
      this.selection = [worker];
      this.batchPop = true;
    },
    // 合同终止
    async handleStopContract(id) {
      try {
        const res = await stopFlow({
          id,
          status: '',
        });
        if (res?.code === 20000) {
          this.$message({ message: '合同终止成功', type: 'success' });
        } else {
          this.$message({ message: '合同终止失败', type: 'warning' });
        }
        this.$refs.dataTable.onReset();
      } catch (error) {
        this.$message({ message: error?.message || '合同终止失败', type: 'warning' });
      }
    },
  },


};
</script>
<style scoped>
.top-filter {
  margin-bottom: 20px;
}
</style>
